<!-- 搜索表单 -->
<template>
  <div>

    <el-form label-width="77px"
             class="ele-form-search"
             @keyup.enter.native="search"
             @submit.native.prevent
             :rules="rules"
             ref="where"
             :model="where">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="商家名称:"
                        prop="subName">
            <el-input clearable
                      v-model="where.subName"
                      placeholder="请输商家名称" />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="订单编号:"
                        prop="transactionId">
            <el-input clearable
                      v-model="where.transactionId"
                      placeholder="请输入订单编号" />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 8 }">
          <el-form-item label="订单金额:"
                        prop="orderAmount">
            <div style="display: flex">
              <el-input maxlength="10"
                        type="number"
                        step="0.01"
                        v-model.number="where.orderAmount.startOrderAmount"
                        placeholder="请输入金额" />
              <span style="margin: 0 5px 0">至</span>
              <el-input maxlength="10"
                        type="number"
                        step="0.01"
                        v-model.number="where.orderAmount.endOrderAmount"
                        placeholder="请输入金额" />
            </div>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }"
                v-if="currentPlatform =='总平台'">
          <el-form-item label="OEM代理:"
                        prop="parentCode">
            <el-select clearable
                       class="ele-block"
                       v-model="where.parentCode"
                       placeholder="请选择OEM代理">
              <el-option v-for="(i,j) in oemList"
                         :key="j"
                         :label="i.oemCode"
                         :value="i.oemCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="下属代理"
                        prop="oemCode">
            <el-select clearable
                       class="ele-block"
                       v-model="where.oemCode"
                       placeholder="请选择下属代理">
              <el-option v-for="(i,j) in secondaryList"
                         :key="j"
                         :label="i.oemCode"
                         :value="i.oemCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
          <el-form-item label="创建时间:"
                        prop="dateRange">
            <el-date-picker v-model="where.dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <div class="ele-form-actions">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ele-btn-icon"
                       @click="search">
              查询
            </el-button>
            <el-button @click="resetForm('where')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {

  data () {
    let validateAmount = (rule, value, callback) => {
      console.log(value)
      if (value.startOrderAmount == '' && value.endOrderAmount == '') {
        callback()
      }
      if (typeof (value.startOrderAmount) == 'number' && typeof (value.endOrderAmount) == 'number') {
        if (value.startOrderAmount && value.endOrderAmount) {
          callback()
        } else {

          callback(new Error('请输入订单金额开始值和结束值'))
        }
      } else {
        callback(new Error('订单金额开始值和结束需为数字'))
      }

    };
    // 默认表单数据
    const defaultWhere = {
      // 商家名称
      subName: '',

      orderAmount: {
        // 订单开始金额
        startOrderAmount: '',
        // 订单结束金额
        endOrderAmount: '',
      },
      // 订单编号
      transactionId: '',
      dateRange: [],
      parentCode: '',
      oemCode: ''
    };
    return {

      // 表单数据
      where: {
        ...defaultWhere
      },
      sumbitForm: {},
      // 正则
      rules: {
        orderAmount: [
          { validator: validateAmount, trigger: 'blur' }
        ],

      }
    };
  },
  props: {
    typeList: Array,
    oemList: {
      type: Array,
      default: () => []
    },
    secondaryList: {
      type: Array,
      default: () => []
    },
    currentPlatform: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {


    /* 搜索 */
    search () {
      for (const key in this.where) {
        if (key == 'dateRange') {
          let startTime = this.where[key]?.[0];
          let endTime = this.where[key]?.[1];
          this.sumbitForm['startTime'] = startTime == undefined ? '' : startTime;
          this.sumbitForm['endTime'] = endTime == undefined ? '' : endTime;
        } else if (key == 'orderAmount') {
          this.sumbitForm['startOrderAmount'] = this.where[key].startOrderAmount == undefined ? '' : this.where[key].startOrderAmount;
          this.sumbitForm['endOrderAmount'] = this.where[key].endOrderAmount == undefined ? '' : this.where[key].endOrderAmount;
        } else {
          this.sumbitForm[key] = this.where[key];
        }
      }
      //   console.log(this.sumbitForm)
      this.$emit('search', this.sumbitForm);
    },
    /*  重置 */
    resetForm (formName) {

      this.$refs[formName].resetFields();
      this.where.orderAmount.startOrderAmount = '';
      this.where.orderAmount.endOrderAmount = ''
      this.sumbitForm = {};

      this.$emit('search', this.sumbitForm);

    },
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-form-item__label {
  text-align: inherit;
}
.navList {
  margin-bottom: 25px;
  font-weight: 700;
}
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
</style>
